<script></script>

<template>
  <div class="search">
    <img src="../assets/image/logo.png" alt="" />
    <div>
      <div style="display: flex">
        <input class="search-input" type="search" placeholder="限时专享" />
        <button>搜索</button>
      </div>
      <ul>
        <li><a href="#">限时专享</a></li>
        |
        <li><a href="#">戴森</a></li>
        |
        <li><a href="#">松下冰箱</a></li>
        |
        <li><a href="#">扫地机</a></li>
        |
        <li><a href="#">手机</a></li>
        |
        <li><a href="#">相机特惠</a></li>
        |
        <li><a href="#">Apple</a></li>
        |
        <li><a href="#">游戏本</a></li>
        |
        <li><a href="#">美容仪</a></li>
        |
        <li><a href="#">音响</a></li>
      </ul>
    </div>
  </div>
</template>

<style scoped lang="scss">
.search {
  width: 1000px;
  input::placeholder {
    padding: 10px;
  }
  .search-input {
    width: 640px;
    height: 40px;
    border: 1px solid rgb(0, 153, 168);
  }
  button {
    width: 60px;
    height: 40px;
    color: white;
    border: 1px solid rgb(0, 153, 168);
    background-color: rgb(0, 153, 168);
  }
  ul {
    display: flex;
    list-style: none;
    width: 700px;
    justify-content: space-between;
    margin: 15px 0;
    a {
      text-decoration: none;
      color: black;
    }
  }
}
</style>
